import React, { useReducer } from 'react'
import { Switch, Route, Redirect } from "react-router-dom"
import { initState, reducer } from './store'
import PrivateRoute from "./utils/PrivateRoute"


//懒加载
const Login = React.lazy(() => import("./pages/Login/Login.jsx"))
const Register = React.lazy(() => import("./pages/register/Register.jsx"))
const Index = React.lazy(() => import("./pages/index/Index.jsx"))
const Detail = React.lazy(() => import("./pages/detail/Detail.jsx"))
// const list = React.lazy(() => import("./pages/list/list.jsx"))
// const search = React.lazy(() => import("./pages/search/search.jsx"))
// const discount = React.lazy(() => import("./pages/discount/discount.jsx"))

//通过react.createContext创建一个上下文对象
export const MyContext = React.createContext();

const App=()=> {
  const [state, dispatch] = useReducer(reducer, initState)

  return (
    <div className='container'>
      <MyContext.Provider value={{state,dispatch }}>
        <React.Suspense fallback={<div>正在努力加载...</div>}>
          {/* 路由视图 Switch  路由规则：Route 重定向:Redireact */}
          <Switch>
            <Route path="/login" component={Login}></Route>
            <Route path="/register" component={Register}></Route>
            <PrivateRoute path="/index" component={Index}></PrivateRoute>
            {/* <PrivateRoute path="/list" component={list}></PrivateRoute> */}
            <PrivateRoute path="/detail/:id" component={Detail}></PrivateRoute>
            {/* <PrivateRoute path="/search" component={search}></PrivateRoute> */}
            {/* <PrivateRoute path="/discount" component={discount}></PrivateRoute> */}
            <Redirect to="/login"></Redirect>
          </Switch>
        </React.Suspense>
      </MyContext.Provider>
    </div>
  )
}
export default App